<template>
    <div class="m-25 mt-65">
        <div class="normal-box-mod">
            <div class="normal-box-hd clearfix">
                <div class="normal-box-title">
                    <div class="decorate-square"></div>
                    <h2>回收垃圾类别</h2>
                </div>
            </div>
            <div class="normal-box-bd">
                <div class="normal-list-page-mod">
                    <div class="mb-2">
                        <Button-group>
                            <Button custom-icon="iconfont icon-fangkuai2"
                                    size="small"
                                    type="primary"
                                    @click="showCreateModal">
                                新建分类
                            </Button>
                        </Button-group>
                    </div>
                    <div class="normal-list-page-bd">
                        <Table :columns="columns"
                               :data="list.data"
                               border></Table>
                    </div>
                    <Page :total="queryData.totalRecord"
                          :current="queryData.page"
                          :page-size="queryData.limit"
                          show-total
                          show-elevator
                          show-sizer
                          @on-change="changePage"
                          @on-page-size-change="changePageSize"
                          style="text-align: center;" />
                </div>
            </div>

            <!-- 新建大类 -->
            <Modal v-model="level1Modal.modal1"
                   :title="level1Modal.title"
                   @on-ok="postData"
                   @on-cancel="cancel">
                <Form :model="level1Modal.formData"
                      :rules="level1Modal.ruleValidate"
                      ref="systemFro"
                      :label-width="130">
                    <FormItem label="回收物品名称:"
                              prop="code">
                        <Select @on-change="changeCode"
                                clearable
                                label-in-value="true"
                                v-model="level1Modal.formData.code"
                                style="width:300px;">
                            <Option v-for="item in level1Modal.options"
                                    :value="item.value"
                                    :key="item.value">{{ item.label }}</Option>
                        </Select>

                    </FormItem>
                    <FormItem label="回收物品计量单位:"
                              prop="unit">
                        <Input v-model="level1Modal.formData.unit"
                               placeholder="如克、台、辆"
                               style="width:300px;"></Input>
                    </FormItem>
                    <FormItem label="备注"
                              prop="desc">
                        <Input v-model="level1Modal.formData.description"
                               type="textarea"
                               :autosize="{minRows: 2,maxRows: 5}"
                               placeholder="说点什么吧..."
                               style="width:300px;"></Input>
                    </FormItem>
                </Form>
            </Modal>

            <!-- 新建子类 -->
            <Modal v-model="level2Modal.modal2"
                   :title="level2Modal.title"
                   @on-ok="postLevelTwoData"
                   @on-cancel="cancel">
                <Form :model="level2Modal.formData"
                      :rules="level2Modal.ruleValidate"
                      ref="systemChildrenFro"
                      :label-width="130">
                    <FormItem label="父类id:">
                        <Input v-model="level2Modal.formData.parentId"
                               placeholder=""
                               disabled
                               style="width:300px;"></Input>

                    </FormItem>
                    <FormItem label="回收物品名称:"
                              prop="name"
                              >
                        <!-- <Select @on-change="changeCode2"
                                clearable
                                label-in-value="true"
                                v-model="level2Modal.formData.code"
                                style="width:300px;">
                            <Option v-for="item in level2Modal.options"
                                    :value="item.value"
                                    :key="item.value">{{ item.label }}</Option>
                        </Select> -->
                        <Input v-model="level2Modal.formData.name"
                               placeholder="请输入回收物品名称"
                               style="width:300px;"></Input>
                    </FormItem>
                    <FormItem label="回收物品计量单位:"
                              prop="unit">
                        <Input v-model="level2Modal.formData.unit"
                               placeholder="如克、台、辆"
                               style="width:300px;"></Input>
                    </FormItem>
                    <FormItem label="备注"
                              prop="desc">
                        <Input v-model="level2Modal.formData.description"
                               type="textarea"
                               :autosize="{minRows: 2,maxRows: 5}"
                               placeholder="说点什么吧..."
                               style="width:300px;"></Input>
                    </FormItem>
                </Form>
            </Modal>
        </div>
    </div>
</template>
<script>
import expandRow from './components/expandRow.vue'
import RecycleApi from '@/api/recycle/recycle.js'

export default {
	data() {
		return {
			queryData: {
				page: 1,
				limit: 10,
				parentId: 0,
				level: 1
			},
			columns: [
				{
					type: 'selection',
					width: 60,
					align: 'center'
				},
				{
					type: 'expand',
					width: 80,
					render: (h, params) => {
						return h(expandRow, {
							props: {
								row: params.row
							}
						})
					},
					title: '展开',
					align: 'center'
				},
				{
					title: 'id',
					key: 'id',
					align: 'center'
				},
				// {
				// 	title: '品类编码',
				// 	key: 'code',
				// 	align: 'center'
				// },
				{
					title: '品类名称',
					key: 'name',
					align: 'center'
				},
				{
					title: '计量单位',
					key: 'unit',
					align: 'center'
				},
                {
					title: '描述',
					key: 'description',
					align: 'center'
				},
				// {
				// 	title: '父类ID',
				// 	key: 'parentId',
				// 	align: 'center'
				// },
				// {
				// 	title: '四分类level',
				// 	key: 'level',
				// 	align: 'center'
				// }, 
                {
					title: '创建人',
					key: 'createName',
					align: 'center'
				},
				{
					title: '创建时间',
					key: 'createTime',
					align: 'center'
				},
				{
					title: '更新时间',
					key: 'updateTime',
					align: 'center'
				},
				/** 自动生成结束 */
				{
					title: '操作',
					align: 'center',
					minWidth: 150,
					render: (h, params) => {
						// 动态渲染组件
						// if (params.row.id == 94) {
						return h('div', { class: 'action-group' }, [
							h(
								'Tooltip',
								{
									props: {
										placement: 'left',
										content: '添加子类'
									},
									style: {
										cursor: 'pointer'
									}
								},
								[
									h(
										'Button',
										{
											props: {
												type: 'primary',
												size: 'small'
											},
											style: {
												marginRight: '5px',
												padding: '1px 2px',
												display:
													params.row.code == 94
														? 'inline-block'
														: 'none'
											},
											on: {
												click: () => {
													this.showCreateChildrenModa(
														params.row
													)
												}
											}
										},
										[
											h('Icon', {
												props: {
													type: 'md-add-circle',
													size: 18
												}
											})
										]
									)
								]
							),
							h(
								'Tooltip',
								{
									props: {
										placement: 'left',
										content: '编辑'
									},
									style: {
										cursor: 'pointer'
									}
								},
								[
									h(
										'Button',
										{
											props: {
												type: 'primary',
												size: 'small'
											},
											style: {
												marginRight: '5px',
												padding: '1px 2px'
											},
											on: {
												click: () => {
													this.showUpdateModal(
														params.row
													)
												}
											}
										},
										[
											h('Icon', {
												props: {
													type:
														' iconfont icon-bianjisekuai',
													size: 18
												}
											})
										]
									)
								]
							),

							h(
								'Tooltip',
								{
									props: {
										placement: 'right',
										content: '删除'
									},
									style: {
										cursor: 'pointer'
									}
								},
								[
									h(
										'Button',
										{
											props: {
												type: 'error',
												size: 'small'
											},
											style: {
												marginRight: '5px',
												padding: '1px 2px'
											},
											on: {
												click: () => {
													this.delData(params.row)
												}
											}
										},
										[
											h('Icon', {
												props: {
													type:
														' iconfont icon-shanchusekuai',
													size: 18
												}
											})
										]
									)
								]
							)
						])
						// }
					}
				}
			],
			list: {
				data: [
					// {
					// 	code: 91,
					// 	name: '易腐垃圾',
					// 	unit: '克',
					// 	description: '厨余易腐垃圾',
					// 	level: 1,
					// 	parentId: 0
					// 	// _disableExpand: true, //展开按钮禁用
					// },
					
				]
			},
			level1Modal: {
				modal1: false,
				title: '',
				formData: {},
				options: [
					{
						value: "91",
						label: '易腐垃圾(厨余)'
					},
					{
						value: "92",
						label: '有毒有害'
					},
					{
						value: "93",
						label: '其他垃圾'
					},
					{
						value: "94",
						label: '可回收'
					}
				],
				ruleValidate: {
					code: [
						{
							required: true,
							message: '回收物品编码不能为空'
						}
					],
					unit: [
						{
							required: true,
							message: '回收物品计量单位不能为空',
							trigger: 'blur'
						}
					]
				}
			},
			level2Modal: {
				modal2: false,
				title: '',
				formData: {},
				ruleValidate: {
					name: [
						{
							required: true,
							message: '回收物品类型不能为空'
						}
					],
					unit: [
						{
							required: true,
							message: '回收物品计量单位不能为空',
							trigger: 'blur'
						}
					]
				},
				options: [
					{
						value: 95,
						label: '纸类'
					},
					{
						value: 96,
						label: '塑料'
					},
					{
						value: 97,
						label: '金属'
					},
					{
						value: 98,
						label: '玻璃'
					},
					{
						value: 99,
						label: '旧衣物'
					},
					{
						value: 89,
						label: '其他可回收物'
					},
					{
						value: 88,
						label: '废木材'
					},
					{
						value: 87,
						label: '小家电'
					}
				]
			},
			pageList: []
		}
	},
	mounted() {
		this.getPageList()
	},
	computed: {},
	methods: {
		async getPageList() {
			let data = (await RecycleApi.getPageList(this.queryData)).data
			// 为code不是94的行添加_disableExpand: true
            data.list = data.list.map(item => {
				if (item.code != 94) {
					return { ...item, _disableExpand: true }
				}
				return item
			})
            this.list.data = data.list
            this.queryData.limit =  data.pageSize
            this.queryData.page =  data.pageNum
            this.queryData.totalRecord = data.totalRecord
		},
		showCreateModal() {
			this.level1Modal.modal1 = true
			this.level1Modal.title = '新建分类'
			this.level1Modal.formData = {
				code: '',
				name: '',
				unit: '',
				description: '',
				level: 1,
				parentId: 0
			}
		},
		changeCode(val) {
			if (val) {
				this.level1Modal.formData.code = val.value
				this.level1Modal.formData.name = val.label
			}
		},
		postData() {
			let that = this
			this.$refs['systemFro'].validate(valid => {
				if (valid) {
					if (!that.level1Modal.formData.id) {
						// 添加
						RecycleApi.add(that.level1Modal.formData).then(res => {
							let message = res.message
							if (res.data) {
								that.$Message.success('添加成功')
								that.level1Modal.modal1 = false
                                that.getPageList()
								return
							}else{
                                that.$Message.error(message)
                            }
						})
					} else if (that.level1Modal.formData.id) {
						//修改
                        RecycleApi.update(that.level1Modal.formData).then(res => {
							
							if (res.code == 0) {
								that.$Message.success('修改成功')
								that.level1Modal.modal1 = false
                                that.getPageList()
								return
							}else{
                                that.$Message.error(res.message)
                            }
						})
					}

					// this.$refs['systemFro'].resetFields();
				} else {
					this.$Message.error('请填写完整的表单项')
				}
			})
		},
		showUpdateModal(row) {
			this.level1Modal.modal1 = true
			this.level1Modal.title = '编辑分类'
			this.level1Modal.formData = {
				id: row.id,
				code:row.code,
				name: row.name,
				unit: row.unit,
				description: row.description,
			}
		},
		// 删除
		delData(row) {
			this.$Modal.confirm({
				title: '确认删除',
				content:
					'<p>您确认删除id为 <strong>' +
					row.id.toString() +
					'</strong> 的 <strong>' +
					row.name.toString() +
					'</strong>吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
				loading: true,
				onOk: () => {
					RecycleApi.del(row.id).then(res => {
					this.$Modal.remove()
						if (res.code == 0) {
							this.$Notice.success({
								title: '删除成功'
							})
							this.queryData.page = 1
							this.getPageList()
						} else {
							this.$Notice.error({
								title: res.message
							})
						}
					})
				}
			})
		},
		changePage(page) {
            this.queryData.page = page
            this.getPageList()
		},
		changePageSize(pageSize) {
            this.queryData.limit = pageSize
            this.getPageList()
		},
		// 添加子类
		showCreateChildrenModa(row) {
			
			this.level2Modal.modal2 = true
			this.level2Modal.title = '新建子类'
			this.level2Modal.formData = {
				code: '',
				name: '',
				unit: '',
				description: '',
				level: 2,
				parentId: row.id
			}
		},
		changeCode2(val) {
			this.level2Modal.formData.code = val.value
			this.level2Modal.formData.name = val.label
		},
		postLevelTwoData() {
            let that = this
			this.$refs['systemChildrenFro'].validate(valid => {
				if (valid) {
                    
                    if (!that.level2Modal.formData.id) {
						// 添加
						RecycleApi.add(that.level2Modal.formData).then(res => {
							let message = res.message
							if (res.data) {
								that.$Message.success('添加成功')
								that.level2Modal.modal1 = false
                                that.getPageList()
								return
							}else{
                                that.$Message.error(message)
                            }
						})
					}
				} else {
					this.$Message.error('请填写完整的表单项')
				}
			})
		}
	}
}
</script>
<style scoped>
</style>
